<template>
    <div class="main">
        <div class="canvas"
            :style="getCanvasStyle()"
        >
            <ComponentWrapper
                v-for="(item, index) in componentData"
                :key="index"
                :config="item"
            />
        </div>
    </div>
</template>

<script>
import { getStyle } from '@/utils/style'
// import { mapState } from 'vuex'
import ComponentWrapper from '@/components/Editor/ComponentWrapper'
// import { changeStyleWithScale } from '@/utils/translate'

export default {
    model: {
        prop: 'show',
        event: 'change',
    },
    // props: {
    //     show: {
    //         type: Boolean,
    //         default: false,
    //     },
    // },
    components: { ComponentWrapper },
    // computed: mapState([
    //     'componentData',
    //     'canvasStyleData',
    // ]),
    data() {
        return {
            componentData: null,
            canvasStyle: null,
        }
    },
    async mounted() {
        await this.getSaveStyle()
    },
    methods: {
        getSaveStyle() {
            this.componentData = JSON.parse(window.localStorage.getItem('canvasData'))
            let pointList = this.componentData.filter((item) => item.component === 'Point')
            console.log(pointList)
            let pointIdArr = pointList.map(item => item.pointId)
            console.log(pointIdArr)
            
            pointList[0].pointValue = '20'
            pointList[0].pointUnit = 'MPA'
            pointList[1].pointValue = '18'
            pointList[1].pointUnit = '℃'
            this.canvasStyle = JSON.parse(window.localStorage.getItem('canvasStyle'))
        },

        getCanvasStyle() {
            if (this.canvasStyle) {
                return {
                    width: this.canvasStyle.width * parseInt(this.canvasStyle.scale) / 100+'px', 
                    height: this.canvasStyle.height* parseInt(this.canvasStyle.scale) / 100+'px',
                    // transform: `scale(${style.scale/100})`,
                }
            }
        },
        // changeStyleWithScale,
        
        getStyle,

        // close() {
        //     this.$emit('change', false)
        // },
    },
}
</script>

<style lang="scss" scoped>
.canvas {
    background: transparent;
    position: relative;
    margin: auto;
    border: 1px solid #083495;
}

</style>